<template>
  <div>
    <el-row>
      <el-col :span="8" align="left">
        <!-- 新增按钮 -->

        <el-button
            type="primary"
            @click="
            (dialogVisibleA = true),
              (add.name = ''),
              (add.vieworder = '')
          "
            icon="el-icon-circle-plus"
            style="left: auto"
        >新增
        </el-button
        >
      </el-col
      >
      <el-col :span="16" align="left"
      ><!-- 查询表单 -->
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="menuName" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="pagelode">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="clearSerach">清空</el-button>
          </el-form-item>
        </el-form>
      </el-col
      >
    </el-row>

    <!--新增表单-->
    <el-dialog :title="'新增菜单按钮'" :visible.sync="dialogVisibleA" width="30%">
      <el-form :inline="false" class="demo-form-inline">
        <el-form-item label="菜单名称">
          <el-input width="100px" v-model="add.menuName" placeholder="请输入菜单名称"></el-input>
        </el-form-item>


        <el-form-item label="排序">
          <el-input width="100px" v-model="add.orderNum" placeholder="请输入排序"></el-input>
        </el-form-item>

        <template>
          菜单或按钮
          <el-radio v-model="menuType" label="M">父菜单</el-radio>
          <el-radio v-model="menuType" label="C">子菜单</el-radio>
          <el-radio v-model="menuType" label="F">按钮</el-radio>
        </template>

        <div v-show="VisiableB">
          <template>
            父节点
            <el-select v-model="add.parentId">
              <el-option
                  v-for="item in selectData"
                  :key="item.menuId"
                  :label="item.menuName"
                  :value="item.menuId">
              </el-option>
            </el-select>
          </template>
        </div>

        <el-form-item v-show="VisiableA" label="路由">
          <el-input v-model="add.url" width="100px" placeholder="请输入路径"></el-input>
        </el-form-item>

        <el-form-item v-show="VisiableC" label="按钮权限">
          <el-input width="100px" v-model="add.perms" placeholder="请输入权限"></el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input width="100px" v-model="add.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleA = false,add=''">取 消</el-button>
        <el-button type="primary" @click="submitMsg">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改框 -->
    <el-dialog :title="'修改菜单按钮'" :visible.sync="dialogVisibleB" width="30%">
      <el-form :inline="false" class="demo-form-inline">
        <el-form-item label="菜单名称">
          <el-input width="100px" v-model="update.menuName" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input width="100px" v-model="update.orderNum" placeholder="请输入排序"></el-input>
        </el-form-item>
        <template>
          菜单或按钮
          <el-radio v-model="menuType" label="M">父菜单</el-radio>
          <el-radio v-model="menuType" label="C">子菜单</el-radio>
          <el-radio v-model="menuType" label="F">按钮</el-radio>
        </template>
        <div v-show="VisiableB">
          <template>
            父节点
            <el-select v-model="update.parentId">
              <el-option
                  v-for="item in selectData"
                  :key="item.menuId"
                  :label="item.menuName"
                  :value="item.menuId">
              </el-option>
            </el-select>
          </template>
        </div>
        <el-form-item v-show="VisiableA" label="路由">
          <el-input v-model="update.url" width="100px" placeholder="请输入路径"></el-input>
        </el-form-item>

        <el-form-item v-show="VisiableC" label="按钮权限">
          <el-input width="100px" v-model="update.perms" placeholder="请输入权限"></el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input width="100px" v-model="update.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleB = false">取 消</el-button>
        <el-button type="primary" @click="submitMsg1">确 定</el-button>
      </span>
    </el-dialog>
    <el-table :data="tableData" border style="width: 100%">

      <el-table-column prop="menuId" label="Id" width="50"></el-table-column>
      <el-table-column prop="menuName" label="菜单名称" width="100"></el-table-column>
      <el-table-column prop="parentId" label="父母id" width="50"></el-table-column>
      <el-table-column prop="orderNum" label="排序" width="50"></el-table-column>
      <el-table-column prop="url" label="路由" width="100"></el-table-column>
      <el-table-column prop="menuType" align="center" label="菜单类型" width="90"></el-table-column>
      <el-table-column prop="visible" align="center" label="可用" width="50"></el-table-column>
      <el-table-column prop="perms" align="center" label="按钮" width="130"></el-table-column>
      <el-table-column prop="createBy" label="创建人" width="70"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
      <el-table-column prop="updateBy" label="修改人" width="70"></el-table-column>
      <el-table-column prop="updateTime" label="修改时间" width="150"></el-table-column>
      <el-table-column prop="remark" label="备注" width="100"></el-table-column>

      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="
              (dialogVisibleB = true),
                (title = '修改内容'),
                edit(scope.$index, scope.row)
            "
          >编辑
          </el-button
          >
          <el-button
              size="mini"
              type="danger"
              @click="delete123(scope.$index, scope.row)"
          >删除
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNow"
        :page-sizes="[5,10,15,120]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuId: "",
      tableData: [],
      selectData: [],
      pageNow: 1,
      pageSize: 5,
      total: 100,
      menuName: "",
      blank: "",
      dialogVisibleA: false,
      dialogVisibleB: false,
      VisiableA: false,
      VisiableB: false,
      VisiableC: false,
      menuType: "M",
      add: {
        createBy: "",
        menuName: "",
        orderNum: 0,
        parentId: 0,
        perms: "",
        remark: "",
        url: "",
        tableData: [],
      },
      update: {
        menuId: "",
        updateBy: "",
        menuName: "",
        orderNum: 0,
        parentId: 0,
        perms: "",
        remark: "",
        url: "",
      }
    };
  },
  watch: {
    // 每当 question 改变时，这个函数就会执行
    menuType(newQuestion, oldQuestion) {
      if (newQuestion == "M") {
        this.getC()
        this.add.parentId = ""
        this.update.parentId = 0
      } else if (newQuestion == "C") {
        this.getM()
        this.add.parentId = ""
        this.update.parentId = ""
      } else {
        this.addLodeM();
        this.add.parentId = ""
        this.update.parentId = ""
        this.VisiableA = false;
        this.VisiableB = true;
        this.VisiableC = true;
      }
    }
  },
  created() {
    this.pagelode();
  },
  methods: {
    async getC() {
      this.VisiableA = false;
      this.VisiableB = false;
      this.VisiableC = false;
    },
    async getM() {
      this.addLodeC();
      this.VisiableA = true;
      this.VisiableB = true;
      this.VisiableC = false;
    },
    pagelode() {
      var _this = this;
      this.$http
          .post("/menu/queryByPage", {
            data: {
              menuName: _this.menuName,
            },
            pageNo: _this.pageNow,
            pageSize: _this.pageSize,
          })
          .then(function (response) {
            console.log(response.data);
            if (response.data.code == 200) {
              _this.tableData = response.data.data.list;
              _this.total = response.data.data.total;
            }
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    addLodeC() {
      var _this = this;
      this.$http
          .post("/menu/queryAllByC", {})
          .then(function (response) {
            console.log(response.data);
            if (response.data.code == 200) {
              _this.selectData = response.data.data;
            }
          })
    },
    addLodeM() {
      var _this = this;
      this.$http
          .post("/menu/queryAllByM", {})
          .then(function (response) {
            console.log(response.data);
            if (response.data.code == 200) {
              _this.selectData = response.data.data;
            }
          })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pagelode();
    },
    handleCurrentChange(val) {
      this.pageNow = val;
      this.pagelode();
    },
    clearSerach() {
      this.menuName = "";
      this.pagelode();
    },
    edit(index, row) {
      console.log(row);
      this.menuType=row.menuType
      this.update.perms = row.perms,
      this.menuId = row.menuId,
      this.update.updateBy = localStorage.getItem("userName"),
      this.update.menuName = row.menuName,
      this.update.orderNum = row.orderNum,
      this.update.parentId = row.parentId,
      this.update.remark = row.remark,
      this.update.url = row.url
    },
    delete123(index, row) {
      var _this = this;
      this.menuId = row.menuId;
      this.$http
          .delete("/menu/deleteById?id=" + _this.menuId)
          .then(function (response) {
            if (response.data.code == 200) {
              _this.pagelode();
            }
          })
          .catch(function (error) {
            _this.pagelode();
            console.log(error);
          });
    },
    submitMsg() {
      this.dialogVisibleA = false;
      var uri = "/menu/add";
      var _this = this;
      this.$http
          .post(uri, {
            createBy: localStorage.getItem("userName"),
            menuName: _this.add.menuName,
            menuType: _this.menuType,
            orderNum: _this.add.orderNum,
            parentId: _this.add.parentId,
            perms: _this.add.perms,
            remark: _this.add.remark,
            url: _this.add.url,
          })
          .then(function (response) {
            if (response.data.code == 200) {
              _this.pagelode();
            }
          })
          .catch(function (error) {
            _this.pagelode();
            console.log(error);
          });
    },
    submitMsg1() {
      this.dialogVisibleB = false;
      var uri = "/menu/edit";
      var _this = this;
      this.$http.put(uri, {
            menuId: _this.menuId,
            updateBy: localStorage.getItem("userName"),
            menuName: _this.update.menuName,
            menuType: _this.menuType,
            orderNum: _this.update.orderNum,
            parentId: _this.update.parentId,
            perms: _this.update.perms,
            remark: _this.update.remark,
            url: _this.update.url,
          })
          .then(function (response) {
            if (response.data.code == 200) {
              _this.pagelode();
            }
          })
          .catch(function (error) {
            _this.pagelode();
            console.log(error);
          });
    },
  },
};
</script>